// @flow
import React, { Component } from 'react';
import '../static/css/modal-common.css';

import { inject, observer } from 'mobx-react';
import { Modal, Button } from 'antd';

import { EventEmitter } from "events";

const emitter = new EventEmitter()

type props = {}

export default class ModalFrame extends React.Component<Props> {
  props: Props;


  constructor(props) {
    super(props)

    this.state = {
      buttonText: this.props.buttonText || 'Open',
      modalTitle: this.props.modalTitle || 'Title',
      defaultContent: '暂无信息…',
      cancelText: this.props.cancelText || 'cancel',
      okText: this.props.okText || 'ok',
      loading: false,
      visible: false,
    }
  }

  showModal = (modalContent) => {
    this.setState({
      visible: true,
      modalContent: modalContent || this.state.defaultContent
    }, () => {
      // console.log(this.state.modalContent)
    });
  }

  handleOk = (e) => {
    // console.log(e);
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 1000);
  }

  handleCancel = (e) => {
    // console.log(e);
    this.setState({
      visible: false,
    });
  }

  render() {
    var modalContent
    if (this.state.modalContent && this.state.modalContent != '') {
      modalContent = <div className="modal-frame">{this.state.modalContent}</div>
    } else {
      // console.log('555')
      modalContent = <div> {this.state.defaultContent} </div>
    }

    return (
      <div>
        <Modal
          title={this.state.modalTitle}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          cancelText={this.state.cancelText}
          okText={this.state.okText}
          footer={[
            <Button key="back" onClick={this.handleCancel}>{this.state.cancelText}</Button>,
            <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>
              {this.state.okText}
            </Button>,
          ]}
        >
          {modalContent}
        </Modal>
      </div>
    );
  }
}